<template>
<div class="content profile">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left" v-link="{path: getOldPath()}">
    <span class="icon icon-left"></span>
    </a>
    <h1 class="title">房卡充值</h1>
    <div class="buttons-tab">
      <a href="#tab1" class="tab-link button">房卡充值</a>
      <a v-show="showDaiLi()" href="#tab2" class="tab-link button">设置代理</a>
      <a v-show="showPay()" href="#tab3" class="tab-link button">代理提现</a>
    </div>
  </header>
   <div class="content-block">
    <div class="tabs">
       <div id="tab1" class="tab active">
        <div class="list-block">
          
          <ul style="margin-top:.5rem;">
            <li>
              <div class="item-content">
                  <div class="item-inner">
                      <div class="item-title label">充值ID</div>
                      <div class="item-input">
                          <input id="name"  v-model="getUserId()" type="text" name="name" placeholder="充值ID" value="" readonly="true">
                      </div>
                  </div>
              </div>
            </li>
            <!-- <li>
              <div class="item-content">
                  <div class="item-inner">
                      <div class="item-title label">微信号</div>
                      <div class="item-input">
                          <input id="name" type="text" name="name" placeholder="微信号"  value="">
                      </div>
                  </div>
              </div>
            </li> -->
          </ul>
          <ul style="margin-top:.5rem">
            <li>
              <div class="item-link item-content">
                  <div class="item-inner">
                      <div class="item-title label">充值数量</div>
                      <div class="item-input">
                          <input id="num" type="number" v-model="num"  name="num" placeholder="充值数量" >
                          <!-- {{num}} -->
                      </div>
                  </div>
              </div>
            </li>
            
          </ul>
        </div>
        <div class="submit-button">
          <button @click="sendChange()" class="button button-big button-fill">确认充值</button>
        </div>
      
  </div> 
  <!-- 设置代理 -->
<div id="tab2" class="tab">
  <div class="list-block">
    
    <ul style="margin-top:.5rem;">
      <li>
        <div class="item-content">
            <div class="item-inner">
                <div class="item-title label">设置ID</div>
                <div class="item-input">
                    <input id="name"  v-model="getUserId()" type="text" name="name" placeholder="充值ID" readonly="true">
                </div>
            </div>
        </div>
      </li>
      
    </ul>
    <!-- <ul style="margin-top:.5rem" v-show="showDaiLi()">
      <li>
        <div class="item-link item-content">
            <div class="item-inner">
                <div @click="getMydaili()" class="item-title label">设置代理</div>
                <div class="item-input">
                   
                    <select v-model="selected" @click="getMydaili()">
                      <option v-for="val in mydaili" value ="{{val.value}}">{{val.name}}</option>
                    </select>
                </div>
            </div>
        </div>
      </li>
      
    </ul> -->
  </div>
  <div class="submit-button">
    <button @click="setAgent()" class="button button-big button-fill">确认设置</button>
  </div>
   </div>



     <!-- 代理提现 -->
<div id="tab3" class="tab" v-show="showPay()">
  <div class="list-block">
    
    <ul style="margin-top:.5rem;">
      <li>
        <div class="item-content">
            <div class="item-inner">
                <div class="item-title label">提现ID</div>
                <div class="item-input">
                    <input id="name"  v-model="getUserId()" type="text" name="name" placeholder="提现ID" value="" readonly="true">
                </div>
            </div>
        </div>
      </li>
    </ul>

    <ul style="margin-top:.5rem">
            <li>
              <div class="item-link item-content">
                  <div class="item-inner">
                      <div class="item-title label">可提现金额</div>
                      <div class="item-input">
                           <input id="availableMoney"  v-model="getMoney()" type="text" name="money" placeholder="提现ID" readonly="true">
                          <!-- {{num}} -->
                      </div>
                  </div>
              </div>
            </li>
            
      </ul>

     <ul style="margin-top:.5rem">
            <li>
              <div class="item-link item-content">
                  <div class="item-inner">
                      <div class="item-title label">提现金额</div>
                      <div class="item-input">
                          <input id="PayMoney" type="number" v-model="drawMoney"  name="PayMoney" placeholder="充值数量" >
                          <!-- {{num}} -->
                      </div>
                  </div>
              </div>
            </li>
            
      </ul>


  </div>
  <div class="submit-button">
    <button @click="setMoney()" class="button button-big button-fill">确认提现</button>
  </div>
   </div>
      </div>
      </div>
    </div>
</div>
</template>
<script>
import $ from 'zepto'
import _global from '../global'
export default {
  data () {
    return {
      oldPath: '',
      num: 1,
      receiveId: '',
      puserId: 0,
      sendId: 0,
      userId: 0,
      money:0,
      drawMoney:1,
      roleId: 0,
      roleId2: 0,
      selected: 0,
      daili: [
        {value: 1, name: '管理员', selected: null},
        {value: 2, name: '总代理', selected: null},
        {value: 3, name: '二级代理', selected: null},
        {value: 4, name: '三级代理', selected: null}
        // {value: 5, name: '普通玩家', selected: null}
      ],
      mydaili: [],
      id: 0
    }
  },
  ready () {
    this.getOldPath()
    this.roleId = parseInt(window.localStorage.getItem('role_id'), 0)
    this.roleId2 = parseInt(window.localStorage.getItem('role_id2'), 0)
    this.getMydaili()
    this.getMoney();
    this.getUserId ();
    if (!window.localStorage.getItem('user_id')) {
      this.$router.go('/')
      location.reload()
      return
    }
  },
  methods: {
    showDaiLi () {
      
      // let roleId = parseInt(window.localStorage.getItem('role_id'), 0)
      // if (roleId === 4) {
      //   return false
      // }
      // return true

      //玩家才显示

      this.roleId2 = parseInt(window.localStorage.getItem('role_id2'), 0)
      if(this.roleId2 ==5){
        return true
      }else{
        return false
      }
    },

     showPay () {
      let roleId = parseInt(window.localStorage.getItem('role_id'), 0)
      this.roleId2 = parseInt(window.localStorage.getItem('role_id2'), 0)
      if (roleId ==1 &&this.roleId2!=5) {
        return true
      }else{
      return false
      }
    },
    setAgent () {
      let self = this
      this.puserId = parseInt(window.localStorage.getItem('id'), 0)
      this.userId = this.$route.params.user_id
      this.$http.get(_global.url + '/setAgent?pagentId=' + self.puserId + '&agentId=' + self.userId + '&id=' + self.puserId).then(function(res) {
        // console.log(res.data)
        if (res.data.errcode === -999) {
          // this.$router.go('/')
          window.location.href = _global.url + '/wxlogin'
          return
        }
        if (typeof res.data === 'string') {
          res.data = JSON.parse(res.data)
        }
        if (res.data.errcode === 0) {
          self.$router.go(self.oldPath)
          location.reload()
          return
        }else{
          $.alert(res.data.errmsg)
          return
        }
       
      }, function(res) {
        console.log(res)
      })
    },

    setMoney () {

      this.drawMoney = parseFloat(this.drawMoney ).toFixed(2);
      this.money = parseFloat(this.money ).toFixed(2);

      if(this.drawMoney ==0 || this.money==0){
        $.alert('提现金额或者可提现金额为0')
        return
      }
      if(this.drawMoney > this.money){
         $.alert('提现金额超出可提现金额')
         return
      }
     
      let self = this
      this.agentId = parseInt(window.localStorage.getItem('id'), 0)
      this.roleId = parseInt(window.localStorage.getItem('role_id'), 0)

      this.userId = this.$route.params.user_id

      this.$http.get(_global.url + '/payAgent?agentId=' + self.agentId + '&role_id=' + self.roleId+ '&childUserId=' + self.userId + '&money=' + self.drawMoney + '&id=' + self.puserId).then(function(res) {
        // console.log(res.data)
        if (res.data.errcode === -999) {
          // this.$router.go('/')
          window.location.href = _global.url + '/wxlogin'
          return
        }
        if (typeof res.data === 'string') {
          res.data = JSON.parse(res.data)
        }
        if (res.data.errcode === 0) {
          self.$router.go(self.oldPath)
          location.reload()
          return
        }
        if (res.data.errcode === 2) {
          $.alert(res.data.errmsg)
          return
        }
        return
      }, function(res) {
        console.log(res)
      })
    },

    getMydaili () {
      this.mydaili = []
      this.roleId = parseInt(window.localStorage.getItem('role_id'), 0)
      this.roleId2 = parseInt(window.localStorage.getItem('role_id2'), 0)
      for (let i = this.roleId; i < this.roleId2 - 1; i++) {
     
        this.mydaili.push(this.daili[i])
        
        // if (this.roleId2 - 1 === i) {
        //   this.mydaili[i].selected = 'selected'
        // }
      }


    
    },
    getUserId () {
      
      this.userId = this.$route.params.user_id
     
      return this.userId
    },

    getMoney () {
      this.money = this.$route.params.money
      this.drawMoney = this.$route.params.money
      return this.money
    },
    getOldPath () {
      let pathId = parseInt(this.$route.params.path_id, 0) || 1
      if (pathId === 1) {
        this.oldPath = '/user/tasks'
        return this.oldPath
      }
      if (pathId === 2) {
        this.oldPath = '/user/profile'
        return this.oldPath
      }
      return this.oldPath
    },
    sendChange () {
      let self = this
      if (window.localStorage.getItem('user_id')) {
        // self.sendId = window.localStorage.getItem('user_id')
        self.sendId = parseInt(window.localStorage.getItem('user_id'), 0)
        self.id = parseInt(window.localStorage.getItem('id'), 0)
      }
       if ( self.num ==null ||self.num=='' ||self.num === 0) {

         $.alert("充值金额不能为空");
         return
      }
      self.receiveId = this.$route.params.user_id
      this.$http.get(_global.url + '/charge?receiveId=' + self.receiveId + '&sendId=' + self.sendId + '&num=' + self.num + '&id=' + self.id).then(function(res) {
        if (typeof res.data === 'string') {
          res.data = JSON.parse(res.data)
        }
        console.log(res.data)
        if (res.data.errcode === -999) {
          // this.$router.go('/')
          window.location.href = _global.url + '/wxlogin'
          return
        }
        if (res.data.errcode === 0) {
          // $.alert('充值成功')
          self.$router.go(self.oldPath)
          location.reload()
          return
        }
        if (res.data.errcode === -1) {
          $.alert('充值玩家不存在')
          return
        }
        if (res.data.errcode === -2) {
          $.alert('充值错误')
          return
        }
        if (res.data.errcode === -3) {
          $.alert('房卡不足')
          return
        }
        return
        // alert(res.data.data[0].msg)
      }, function(res) {
        console.log(res)
      })
    }
  }

}
</script>
<style>
.profile .list-block {
  margin: 2.4rem 0 1rem 0;
  font-size: .65rem;
}
.profile .list-block .item-subtitle {
  font-size: .65rem;
}
.profile .list-block .item-input {
  margin-top: .06rem;
  margin-bottom: .06rem;
}
.profile .list-block input {
  font-size: .65rem;
}
.profile .list-block select {
  font-size: .65rem;
}
.profile .list-block textarea {
  font-size: .65rem;
}
.profile .list-block .item-title.label  {
  width: 30%;
}
.profile .submit-button {
  margin: 0 auto 2rem auto;
  width: 100%;
  padding: 0 .45rem;
}
.profile .submit-button button {
  background-color: #ed8e07;
  width: 100%;
  line-height: 2.1rem !important;
  height: 2.1rem !important;
}
.label{
  color: black
}
</style>
